<template>
    <div>
        <Breadcrumb name1="商品管理" name2="参数列表"></Breadcrumb>
        <el-card>
            <el-alert title="注意：只允许为第三级分类设置相关参数" type="warning" show-icon :closable="false"></el-alert>
            <div class="search">
                <span>选择商品分类：</span>
                <el-cascader
                    v-model="catId"
                    :options="catList"
                    :props="{ expandTrigger: 'hover',children:'children',value: 'cat_id',label: 'cat_name',}"
                    @change="handleChange">
                </el-cascader>
            </div>
            <el-tabs v-model="activeName" @tab-click="handleChange">
                <!-- 动态参数 -->
                <el-tab-pane label="动态参数" name="many">
                    <el-button type="primary" size="mini" @click="addParamsDialogbtn" :disabled="isDisabled">添加参数</el-button>
                    <el-table :data="manyCatList" border stripe>
                        <el-table-column type="expand">
                            <template slot-scope="scope">
                                <el-tag v-for="(item,index) in scope.row.attr_vals" :key="index"
                                    closable @close="tagClosed(index, scope.row)">{{item}}</el-tag>
                                <el-input v-if="scope.row.inputVisible"
                                    v-model="scope.row.inputValue" 
                                    @blur="addTag(scope.row)"
                                    size="small"></el-input>
                                <el-button v-else class="button-new-tag" size="small" @click="showInput(scope.row)">+ New Tag</el-button>
                            </template>
                        </el-table-column>
                        <el-table-column type="index"></el-table-column>
                        <el-table-column prop="attr_name" label="参数名称"></el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button type="primary" icon="el-icon-edit" size="mini" @click="updateParamsDialogbtn(scope.row.attr_id)">编辑</el-button>
                                <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteParams(scope.row.attr_id)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
                <!-- 静态参数 -->
                <el-tab-pane label="静态参数" name="only">
                    <el-button type="primary" size="mini" @click="addParamsDialogbtn">添加参数</el-button>
                    <el-table :data="onlyCatList" border stripe>
                        <el-table-column type="expand">
                            <template slot-scope="scope">
                                <el-tag v-for="(item,index) in scope.row.attr_vals" :key="index"
                                    closable @close="tagClosed(index, scope.row)">{{item}}</el-tag>
                                <el-input v-if="scope.row.inputVisible"
                                    v-model="scope.row.inputValue"
                                    @blur="addTag(scope.row)"
                                    size="small"></el-input>
                                <el-button v-else class="button-new-tag" size="small" @click="showInput(scope.row)">+ New Tag</el-button>
                            </template>
                        </el-table-column>
                        <el-table-column type="index"></el-table-column>
                        <el-table-column prop="attr_name" label="参数名称"></el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button type="primary" icon="el-icon-edit" size="mini" @click="updateParamsDialogbtn(scope.row.attr_id)">编辑</el-button>
                                <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteParams(scope.row.attr_id)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
            </el-tabs>
        </el-card>

        <!-- 添加参数的对话框 -->
        <el-dialog
        :title="'添加'+titleText"
        :visible.sync="addParamsDialog"
        width="50%"
        @close="addDialogClose">
            <el-form :model="addParamsForm" :rules="addParamsFormRules" 
            ref="addParamsFormRef" label-width="100px">
                <el-form-item :label="titleText" prop="attr_name">
                    <el-input v-model="addParamsForm.attr_name"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addParamsDialog = false">取 消</el-button>
                <el-button type="primary" @click="addParams">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 修改参数对话框 -->
        <el-dialog
        :title="'修改'+titleText"
        :visible.sync="updateParamsDialog"
        width="50%"
        @close="updateDialogClose">
        <el-form :model="updateParamsForm" :rules="updateParamsFormRules" 
        ref="updateParamsFormRef" label-width="100px">
            <el-form-item :label="titleText" prop="attr_name">
            <el-input v-model="updateParamsForm.attr_name"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="updateParamsDialog = false">取 消</el-button>
            <el-button type="primary" @click="updateParams">确 定</el-button>
        </span>
        </el-dialog>
    </div>
</template>

<script>
import { request } from '../../../api/axios'
import Breadcrumb from "../components/Breadcrumb.vue"
export default {
    components:{ Breadcrumb },
    data(){
        return{
            // 获取到的商品分类选项的数据
            catList:[],
            activeName: "many",
            // 选中的分类选项的id
            catId:[],
            // 获取到的动态参数
            manyCatList:[],
            // 获取到的静态参数
            onlyCatList:[],

            titleText: "",
            // 添加参数对话框的显示与隐藏
            addParamsDialog:false,
            // 添加参数的表单数据
            addParamsForm: {
                attr_name: '',
                attr_sel: this.activeName
            },
            addParamsFormRules: {
                attr_name: [{ required: true, message: '请输入参数名称', trigger: 'blur' }]
            },
            // 新增按钮是否可用
            isDisabled:true,

            // 编辑参数的显示与隐藏
            updateParamsDialog:false,
            updateParamsForm:{},
            updateParamsInfo:{
                attr_name: '',
                attr_sel: this.activeName
            },
            updateParamsFormRules: {
                attr_name: [{ required: true, message: '请输入参数名称', trigger: 'blur' }]
            },

            // 删除
        }
    },
    created() {
        this.getCateList()
        // this.getManyCatList()
    },
    methods:{
        // 获取到商品分类选项的数据
        getCateList(){
            request("get","categories")     //1.6.1
            .then(res =>{
                console.log(res)
                this.catList=res.data
            })
        },

        // 选择分类时获取动态和静态参数
        handleChange(){
            console.log(this.catId)
            this.isDisabled=false
            // this.getManyCatList()
            // this.getOnlyCatList()
            this.getParamsCatList()
        },

        // 获取动态参数
        // getManyCatList(){
        //     request("get","categories/"+this.catId[2]+"/attributes",{sel:"many"})
        //     .then( res => {
        //         console.log(res)
        //         // 把attr_vals分割为数组形式
        //         res.data.forEach(item => {
        //             item.attr_vals = item.attr_vals ? item.attr_vals.split(' ') : []
        //             item.inputVisible = false
        //             item.inputValue = ''
        //         })
        //         this.manyCatList=res.data
        //     })
        // },
        // // 获取静态参数
        // getOnlyCatList(){
        //     request("get","categories/"+this.catId[2]+"/attributes",{sel:"only"})
        //     .then( res => {
        //         console.log(res)
        //         res.data.forEach(item => {
        //             item.attr_vals = item.attr_vals.split(' ')
        //         })
        //         this.onlyCatList=res.data
        //     })
        // },
        getParamsCatList(){
            request("get","categories/"+this.catId[2]+"/attributes",{sel:this.activeName})
            .then( res => {
                console.log(res)
                res.data.forEach(item => {
                    item.attr_vals = item.attr_vals ? item.attr_vals.split(' ') : []
                    item.inputVisible = false
                    item.inputValue = ''
                })
                if (this.activeName == "many") {
                    this.manyCatList = res.data
                } else {
                    this.onlyCatList = res.data
                }
            })
        },

        // 添加参数
        addParamsDialogbtn(){
            this.addParamsDialog=true
            this.titleText=this.activeName=="many" ? "动态参数":"静态参数"
        },
        addParams(){
            console.log(this.activeName)
            this.addParamsForm.attr_sel=this.activeName
            console.log(this.addParamsForm)
            this.$refs.addParamsFormRef.validate(async valid => {
                if (!valid) return
                request("post","categories/"+this.catId[2]+"/attributes",this.addParamsForm)    //1.7.2
                .then( res => {
                    console.log(res)
                    if(res.meta.status==201){
                        this.$message.success('添加参数成功')
                        this.addParamsDialog=false
                        this.getParamsCatList()
                    }
                })
            })
        },
        addDialogClose() {
            this.$refs.addParamsFormRef.resetFields()
        },

        // 编辑参数
        updateParamsDialogbtn(id){
            this.updateParamsDialog=true
            this.titleText=this.activeName=="many" ? "动态参数":"静态参数"
            request("get","categories/"+this.catId[2]+"/attributes/"+id)    //1.7.4
            .then(res => {
                console.log(res)
                this.updateParamsForm=res.data
            })
        },
        updateParams(){
            this.updateParamsInfo.attr_name=this.updateParamsForm.attr_name
            this.updateParamsInfo.attr_sel=this.activeName
            this.$refs.updateParamsFormRef.validate(async valid => {
                if (!valid) return
                request("put","categories/"+this.catId[2]+"/attributes/"+this.updateParamsForm.attr_id,this.updateParamsInfo)   //1.7.5
                .then( res => {
                    console.log(res)
                    if(res.meta.status==200){
                        this.$message.success('修改参数成功')
                        this.updateParamsDialog=false
                        this.getParamsCatList()
                    }else{this.$message.error('修改参数失败')}
                })
            })
        },
        updateDialogClose(){
            this.$refs.updateParamsFormRef.resetFields()
        },

        // 删除参数
        deleteParams(id){
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                request("delete","categories/"+this.catId[2]+"/attributes/"+id)    //1.7.3
                .then(res => {
                    console.log(res)
                    if(res.meta.status==200){
                        this.$message.success('删除参数成功')
                        this.getParamsCatList()
                    }else{his.$message.error('删除参数失败')}
                })
            })
        },

        // 设置tag
        // 删除tag
        tagClosed(index,row){
            row.attr_vals.splice(index,1)
        },
        // 点击切换tag和input
        showInput(item){
            // inputVisible为true时为input
            item.inputVisible = true
        },
        addTag(row){
            if (row.inputValue==""){
                row.inputValue = ""
                row.inputVisible = false
                return
            }
            row.attr_vals.push(row.inputValue)
            row.inputValue = ''
            row.inputVisible = false
            request()
        },
        updateTag(){}
    }
}
</script>

<style scoped>
.search{
    margin: 20px 0px;
}
.el-table{
    margin-top: 20px;
}
</style>